<template>
  <div class="container">
    <div class="content">
      <div style="display: flex">
        <img src="../../assets/imgs/admins.png" class="image" />
        <div style="padding: 20px; background: white; text-align: center">
          <p class="p1">4</p>
          <p class="p1">管理员数量</p>
        </div>
      </div>
      <div style="display: flex">
        <img src="../../assets/imgs/vips.png" class="image" />
        <div style="padding: 20px; background: white; text-align: center">
          <p class="p2">858</p>
          <p class="p2">会员数量</p>
        </div>
      </div>
      <div style="display: flex">
        <img src="../../assets/imgs/today.png" class="image" />
        <div style="padding: 20px; background: white; text-align: center">
          <p class="p3">263</p>
          <p class="p3">今日访问量</p>
        </div>
      </div>
      <div style="display: flex">
        <img src="../../assets/imgs/nums.png" class="image" />
        <div class style="padding: 20px; background: white; text-align: center">
          <p class="p4">48</p>
          <p class="p4">文章数量</p>
        </div>
      </div>
    </div>
    <!-- 统计图 -->
    <div class="pic">
      <div class="pic_div">
        <p class="p_p">下载量</p>
        <hr />
        <div id="myChart" :style="{ width: '700px', height: '300px' }"></div>
      </div>
      <div class="pic_div">
        <p class="p_p">下载量</p>
        <hr />
        <div id="loadLine" class="chart" :style="{ width: '700px', height: '300px' }"></div>
      </div>
    </div>
    <!-- 曲线图 -->
    <div class="curve">
      <p class="curve_p">访问统计</p>
      <hr />
      <div id="loadBend" :style="{ width: '1600px', height: '300px' }"></div>
    </div>
  </div>
</template>
<script>
import { columnlist } from "@/api/data";
import { curvelist } from "@/api/data";
import { linelist } from "@/api/data";
export default {
  name: "",
  components: {},
  data() {
    return {
      columnlist: [],
      linelist: [],
      curvelist: []
    };
  },
  mounted() {
    this.drawLine();
    this.loadLine();
    this.loadBend();
  },
  methods: {
    // 柱状图
    drawLine() {
      columnlist().then(res => {
        console.log(res.data.result);
        this.columnlist = res.data.result;
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        myChart.setOption({
          color: ["#4AD2FF"],
          title: { text: "文件数量" },
          tooltip: {},
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            data: this.columnlist.month
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: this.columnlist.downLoadCount
            }
          ]
        });
      });
    },
    //折线图
    loadLine() {
      linelist().then(res => {
        console.log(res.data.result);
         this.linelist = res.data.result;
        let loadLine = this.$echarts.init(document.getElementById("loadLine"));
        loadLine.setOption({
          title: {
            text: "协会文章"
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          legend: {
            data: ["文件公告", "行业动态", "政策法规"]
          }, //展示的折线图标题
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.linelist.month // x轴数据
          }, //x轴的配置显示
          yAxis: {
            type: "value"
          }, //y轴的配置显示
          label: {},
          tooltip: {
            trigger: "axis"
          },
          series: [
            {
              name: "文件公告",
              stack: "总量",
              data: this.linelist.announcementCount,
              type: "line"
            },
            {
              name: "行业动态",
              stack: "总量",
              stack: "总量",
              data: this.linelist.dynamicCount,
              type: "line"
            },
            {
              name: "政策法规",
              stack: "总量",
              data: this.linelist.lawCount,
              type: "line"
            }
          ] //y轴展示的数据
        });
      });
    },
    //曲线图
    loadBend() {
      curvelist().then(res => {
        console.log(res.data.result);
        this.curvelist = res.data.result;
        let loadBend = this.$echarts.init(document.getElementById("loadBend"));
        loadBend.setOption({
          title: {
            text: "访问量"
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.curvelist.day
          }, //x轴的配置显示
          yAxis: {
            type: "value"
          }, //y轴的配置显示
          label: {},
          tooltip: {
            trigger: "axis"
          },
          series: [
            {
              name: "访问量",
              smooth: true, //true 为平滑曲线，false为直线
              stack: "总量",
              areaStyle: {
                normal: {
                  color: "#97EBF1" //改变区域颜色
                }
              },
              itemStyle: {
                normal: {
                  color: "#275F82", //改变折线点的颜色
                  lineStyle: {
                    color: "#13FF14" //改变折线颜色
                  }
                }
              },
              data: this.curvelist.browseCount,
              type: "line"
            }
          ] //y轴展示的数据
        });
      });
    }
  }
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
}
.p1 {
  font-size: 15px;
  color: blue;
}

.p2 {
  color: #d74c29;
  font-size: 15px;
}

.p3 {
  color: green;
  font-size: 15px;
}

.p4 {
  color: black;
  font-size: 15px;
}

.content {
  display: flex;
  justify-content: space-around;
}
.curve {
  margin-top: 30px;
  border-radius: 15px;
  background-color: white;
  .curve_p {
    font-size: 18px;
    padding: 10px;
  }
}
.pic {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  .pic_div {
    border-radius: 15px;
    background-color: white;
    .p_p {
      font-size: 18px;
      padding: 10px;
    }
  }
}
</style>
